<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
<div id="permsDialog" title="Group Permissions">
	<p>
		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
		Please Select User for edit permissions!
	</p>
</div>

<script type="text/javascript">
jQuery('#list').jqGrid({
	url:'/users/list/format/json',
	datatype: 'json',
	mtype: 'GET',
	colNames:['Id', 'Login', 'Password', 'First Name', 'Last Name', 'E-Mail', 'Status', 'Registered', 'Group'],
	colModel :[
	  {name:'USERS_ID', index:'USERS_ID', sorttype:'int', width:50},
	  {name:'USERS_LOGIN', index:'USERS_LOGIN', editable:true, editrules:{required:true}},
	  {name:'USERS_PASSWORD', index:'USERS_PASSWORD', editable:true, search:false, edittype:'password', hidden:true, editrules: {edithidden:true, searchhidden:false}},
	  {name:'USERS_FIRSTNAME', index:'USERS_FIRSTNAME', editable:true, editrules:{required:true}},
	  {name:'USERS_LASTNAME', index:'USERS_LASTNAME', editable:true, editrules:{required:true}},
	  {name:'USERS_EMAIL', index:'USERS_EMAIL', editable:true, editrules:{email:true, required:true}},
	  {name:'USERS_STATUS', index:'USERS_STATUS', editable:true, edittype:'select', editoptions:{value:{<?php foreach ($this->userStatuses as $statusId => $statusTitle) echo "{$statusId}:'{$statusTitle}',"; ?>}}},
	  {name:'USERS_REGISTERED', index:'USERS_REGISTERED', sorttype:'date'},
	  {name:'USERS_GROUPID', index:'USERS_GROUPID', editable:true, editrules:{required:true}, edittype:'select',
		editoptions:{value:{<?php foreach ($this->userGroups as $key => $group) echo "{$group['USERGROUPS_ID']}:'{$group['USERGROUPS_TITLE']}',"; ?>}}}
	],
	pager: jQuery('#pager'),
	rowNum:20,
	rowList:[20, 40, 60, 80, 100, 150, 200],
	sortname: 'USERS_ID',
	sortorder: 'asc',
	viewrecords: true,
	caption: 'Users View',
	editurl: '/users/edit',
	height:'auto',
	width:'auto'
}).navGrid('#pager',{
	edit:true, add:true, del:true, search:true
}).navButtonAdd('#pager',{
	caption:"User Permissions", onClickButton: function(id) {
		var gr = jQuery("#list").getGridParam("selrow");
		if( gr != null ) {
			document.location.href = '/users/rights/id/' + gr;
		} else {
			$("#permsDialog").dialog('open');
		}
	},
	position:"last"
});

$("#permsDialog").dialog({
	bgiframe: true,
	modal: true,
	autoOpen: false,
	buttons: {
		Ok: function() {
			$(this).dialog('close');
		}
	}
});
</script>
